
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.net/font-awesome/4.7.0/css/font-awesome.css">
    <style>
        body {
            font-family: Arial;
        }

        * {
            box-sizing: border-box;
        }

        form.example input[type=text] {
            padding: 10px;
            padding-bottom: 7px;
            font-size: 17px;
            border: 1px solid grey;
            float: left;
            width: 80%;
            background: #f1f1f1;
        }

        form.example button {
            float: left;
            width: 20%;
            padding: 10px;
            background: #2196F3;
            color: white;
            font-size: 17px;
            border: 1px solid grey;
            border-left: none;
            cursor: pointer;
        }
        .delete{
            background-color: red;
        }
        form.example button:hover {
            background: #0b7dda;
        }

        form.example::after {
            content: "";
            clear: both;
            display: table;
        }
        .orders{
            margin: auto;
        }

        table {
            margin: 0 auto;
            width: 300px;
            border: 1px solid green;
            border-collapse: collapse;
        }

        th, td {
            text-align: center;
            border-bottom: 1px solid green;

        }
        .container {
            height: 100%;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }
        th {
            background-color: #f2f2f2;
        }
        .container {
            display: flex;
            flex-direction: column;
            width: 100%;
            height: 1000px;
            background-image: linear-gradient(to right, #fbc2eb, #a6c1ee);
        }

        body{
            margin: 0;
        }

        .mainContent {
            display: flex;
            flex-direction: row;
            height: 90%;
            width: 100%;
        }

        .mainDivleft {
            width: 15%;
            height: 100%;
        }

        .mainDivright {
            width: 85%;
            height: 100%;
        }
            a {
                text-decoration: none;
            }

    </style>
</head>
<body>
<div class="container">

    <div class="mainContent">
        <div class="mainDivleft">
            <p style="font-size: 45px;margin-left: 10px">导航栏</p>
            <ul>
                <li class="link"><a href="/masterorder.jsp" style="font-size: 30px">订单查询</a></li>
                <li class="link"><a href="/bookmanage.jsp" style="font-size: 30px">书库管理</a></li>
                <li class="link"><a href="#" style="font-size: 30px">头条管理</a></li>
            </ul>
        </div>
        <div class="mainDivright">

            <div class="mainRight">
                <form class="example" action="/" style="margin:auto;max-width:300px">
                    <input type="text" placeholder="头条搜索.." name="search" class="search">
                    <button type="submit"><i class="fa fa-search"></i></button>
                </form>
                <table style="width: 75%;" class="orders">
                    <tr>
                        <th colspan="7">您的头条如下</th>
                    </tr>
                    <tr>
                        <td>头条内容</td>
                        <td>更改时间</td>
                        <td>管理</td>
                    </tr>
                    <tr>
                        <td style="width: 1000px;">冯楷晟是fks</td>
                        <td style="width: 200px;" >2024-7-2</td>
                        <td style="width: 200px;"><button class="delete">删除头条</button></td>
                    </tr>
                </table>
            </div>
        </div>
    </div>
</div>


</body>
</html>
